<template>
  <div>
    <!-- <h4 v-if="title" :style="{ marginBottom: '20px' }">{{ title }}</h4> -->
    <div ref="chart" class="chart-wrap"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  name: 'BarChart',
  props: {
    title: {
      type: String,
      default: ''
    },
    option: {
      type: Object,
      default: () => {
        return {
          grid: {
            containLabel: true,
            left: '20px',
            right: '20px',
            top: '20px',
            bottom: '20px'
          },
          color: ['#1890FF'],
          // legend: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#EBEEF5'
              }
            }
          },
          dataset: {
            source: []
          },
          series: [{ type: 'bar', name: '事件数量' }]
        }
      }
    }
  },
  data () {
    return {
      myChart: null
    }
  },
  methods: {
    initChart () {
      const chartDom = this.$refs.chart
      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.option)
    },
    setOption (option) {
      this.myChart.setOption(option)
    },
    onResize () {
      this.myChart.resize()
    }
  },
  mounted () {
    this.initChart()
    this.resizeDebounce = _.debounce(this.onResize, 200)
    this.__window__.addEventListener('resize', this.resizeDebounce)
  },
  beforeDestroy () {
    this.__window__.removeEventListener('resize', this.resizeDebounce)
  }
}
</script>
<style scoped>
.chart-wrap {
  /* height: 280px; */
  height: 100%;
}
</style>
